<template>
    <div>
      <common-card title="累计用户数" :value="userLastDayNumber">
        <template>
<!--          <div id="total-users-chart" :style="{ width: '100%', height: '100%' }">-->
<!--          </div>-->
          <vue-echarts :options="getOptions()"></vue-echarts>
        </template>
        <template v-slot:footer >
          <div class="total-users-footer">
            <span>日同比</span>
            <span class="emphasis">{{userGrowthLastDay}}</span>
            <div class="increased"></div>
            <span class="month">月同比</span>
            <span class="emphasis">{{userGrowthLastMonth}}</span>
            <div class="descreased"></div>
          </div>
        </template>
      </common-card>
    </div>
</template>

<script>
  import CommonCardMixin from '../../utils/CommonCardMixin'
  import CommonDataMixin from '../../utils/CommonDataMixin'
export default {
  name: 'TotalUsers',
  mixins: [CommonCardMixin, CommonDataMixin],
  methods: {
    getOptions () {
      return {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false
        },
        series: [
          {
            type: 'bar',
            // stack: '总量',
            barGap: '-100%',
            barWidth: 10,
            data: [this.userLastDay],
            itemStyle: {
              color: '#eee'
            }
          },
          {
            type: 'bar',
            // stack: '总量',
            data: [this.userLastMonth],
            barWidth: 10,
            itemStyle: {
              color: '#45c946'
            }
          },
          {
            type: 'custom',
            data: [this.userLastMonth],
            stack: '总量',
            renderItem: (params, api) => {
              const value = api.value(0)
              const endPoint = api.coord([value, 0])
              return {
                type: 'group',
                position: endPoint,
                children: [{
                  type: 'path',
                  shape: {
                    d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
                    x: -5,
                    y: -20,
                    width: 10,
                    height: 10,
                    layout: 'cover'
                  },
                  style: {
                    fill: '#45c946'
                  }
                },
                  {
                    type: 'path',
                    shape: {
                      d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
                      x: -5,
                      y: 10,
                      width: 10,
                      height: 10,
                      layout: 'cover'
                    },
                    style: {
                      fill: '#45c946'
                    }
                  }]
              }
            }
          }
        ]
      }
    }
  }
  // mounted () {
  //   const chartDom = document.getElementById('total-users-chart')
  //   // console.log(this.$echarts)
  //   const chart = this.$echarts.init(chartDom)
  //   chart.setOption({
  //     grid: {
  //       top: 0,
  //       bottom: 0,
  //       left: 0,
  //       right: 0
  //     },
  //     xAxis: {
  //       type: 'value',
  //       show: false
  //     },
  //     yAxis: {
  //       type: 'category',
  //       show: false
  //     },
  //     series: [
  //       {
  //         type: 'bar',
  //         // stack: '总量',
  //         barGap: '-100%',
  //         barWidth: 10,
  //         data: [250],
  //         itemStyle: {
  //           color: '#eee'
  //         }
  //       },
  //       {
  //         type: 'bar',
  //         // stack: '总量',
  //         data: [200],
  //         barWidth: 10,
  //         itemStyle: {
  //           color: '#45c946'
  //         }
  //       },
  //       {
  //         type: 'custom',
  //         data: [200],
  //         stack: '总量',
  //         renderItem: (params, api) => {
  //           const value = api.value(0)
  //           const endPoint = api.coord([value, 0])
  //           return {
  //             type: 'group',
  //             position: endPoint,
  //             children: [{
  //               type: 'path',
  //               shape: {
  //                 d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
  //                 x: -5,
  //                 y: -20,
  //                 width: 10,
  //                 height: 10,
  //                 layout: 'cover'
  //               },
  //               style: {
  //                 fill: '#45c946'
  //               }
  //             },
  //               {
  //                 type: 'path',
  //                 shape: {
  //                   d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
  //                   x: -5,
  //                   y: 10,
  //                   width: 10,
  //                   height: 10,
  //                   layout: 'cover'
  //                 },
  //                 style: {
  //                   fill: '#45c946'
  //                 }
  //               }]
  //           }
  //         }
  //       }
  //     ]
  //   })
  // }
}
</script>

<style scoped lang="scss">
.total-users-footer{
  display: flex;
  align-items: center;
  .month{
    margin-left: 10px;
  }
}
</style>
